<script setup lang="ts">
import { ref } from 'vue'
import type { Data } from './types.ts'
import Accordion from '@/components/accordion/accordion.vue'
import AccordionItem from '@/components/accordion/accordion-item.vue'
import VideoComp from '../components/video-comp.vue'

defineProps<{ data: Data }>()

const activatedItem = ref(0)
</script>

<template>
  <div class="grid grid-cols-2 grid-rows-1 bg-white _rounded overflow-hidden">
    <div class="p-[clamp(1rem,0.5655rem+1.0695vw,1.25rem)] lg:p-[clamp(2rem,0rem+3.125vw,3rem)]">
      <div
        class="pb-[1rem] text-[clamp(1.5rem,0.8483rem+1.6043vw,1.875rem)] lg:text-[clamp(1.875rem,-0.375rem+3.5156vw,3rem)] lg:leading-[1.2]"
      >
        <p v-for="(s, key) in data.mainTitle" :key>{{ s }}</p>
      </div>

      <Accordion v-model="activatedItem">
        <AccordionItem
          v-for="(item, key) in data.list"
          :title="item.mainTitle"
          :item-key="key"
          :subtitle="item.subtitle"
          :key
        />
      </Accordion>
    </div>

    <div>
      <template v-for="(i, key) in data.list" :key>
        <keep-alive>
          <VideoComp
            v-if="activatedItem === key"
            class="w-full h-full"
            :video-src="i.videoSrc"
            autoplay
          />
        </keep-alive>
      </template>
    </div>
  </div>
</template>

<style scoped>
.accordion-item:deep(.main-title) {
  background-color: #fafafa;
}
</style>
